<template>
  <div class="info-pos">
    <div class="card" style="width: 80rem; margin-top: 15px " v-for="item in OrderList">
      <div class="card-body">
        <h4 style="display: inline-block">{{item.shopName}}</h4>
        <h6 style="display: inline-block">{{item.openOrder.paytime}}</h6>
        <div>订单号：{{item.openOrder.openOrderNumber}}</div>
        <div>总价：{{item.openOrder.wholePrice}}</div>
        <div>地址：{{item.openOrder.allAddress}}</div>
        <div>订单情况：[0:待处理;1:已经接单;2:已配送;3:已完成;]<button type="button" class="btn btn-primary" @click.prevent="updateSituation(item)">{{item.openOrder.orderSituation}}</button></div>
        <table class="table">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">dishName</th>
            <th scope="col">dishPrice</th>
            <th scope="col">dishNum</th>

          </tr>
          </thead>
          <tbody>
          <tr v-for="(dish, index) in item.openOrderHaveList" :key="dish.dishNumber">

            <th scope="row">{{++index}}</th>
            <td>{{dish.dishName}}</td>
            <td>{{dish.dishPrice}}</td>
            <td>{{dish.wholeNum}}</td>


          </tr>

          </tbody>
        </table>
      </div>
    </div>
    <div class="footer-pos"></div>
  </div>
</template>

<script>
export default {
  name: 'OpenOrder',
  data() {
    return {
      OrderList:[]
    }
  },

  methods:{
    async getOrderList() {
      const {data: res} = await this.$http.get('/openOrder/getOrderListM?merchantPhoneNumber='+localStorage.getItem("username_M"))
      this.OrderList=res.data
    },

    async updateSituation(item){

      const {data: res} = await this.$http.get('/openOrder/update?merchantPhoneNumber='+localStorage.getItem("username_M")
          +'&orderNumber='+item.openOrder.openOrderNumber)
      await this.getOrderList();
    }
  },

  created() {
    this.getOrderList();
  }


}
</script>

<style lang="less" scoped>
.info-pos{
  margin: 0 auto;
  width: 80rem;
  height: 200px;

}
</style>
